<template>
  <div>
    <div class="top">我的订单</div>
    <van-tabs v-model="active" sticky line-width="25%" animated>
      <van-tab  v-for="item in titles" :key="item.id" :title="item.title">
        <van-card v-for="item in titles" :key="item.id"> 
          <template #tags>
            <div>
              <p class="top_text">
                <span>网红堡堡（单人自选）组合套餐...等3件商品</span>
                <span class="loading">等待付款</span>
              </p>
            </div>
            <div class="img_box">
              <div class="foods">
                <img
                  src="https://axhub.im/pro/221031c5a692ef70/images/我的订单/u9.png"
                />
                <img
                  src="https://axhub.im/pro/221031c5a692ef70/images/我的订单/u8.png"
                />
                <img
                  src="https://axhub.im/pro/221031c5a692ef70/images/我的订单/u7.png"
                />
              </div>
              <div>
                <img
                  id="u11"
                  src="https://axhub.im/pro/221031c5a692ef70/images/我的订单/u30.png"
                  alt=""
                />
              </div>
            </div>
          </template>
          <template #footer>
            <div class="footer">
              <div>应付金额: ￥{{ price }}</div>
              <div>
                <van-button size="mini">取消订单</van-button>
                <van-button size="mini">立即付款</van-button>
              </div>
            </div>
          </template>
        </van-card>
      </van-tab>
     
    </van-tabs>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs, Card, Button } from "vant";

Vue.use(Card);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
export default {
  data() {
    return {
      active: 0,
      titles: [
        {
          id: 1,
          title: "全部",
        },
        {
          id: 2,
          title: "待付款",
        },
        {
          id: 3,
          title: "已完成",
        },
        {
          id: 4,
          title: "已取消",
        },
      ],
      
      price: 180,
    };
  },
};
</script>

<style scoped>
.top {
  text-align: center;
  position: relative;
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  border-top: 1px solid rgba(242, 242, 242, 1);
}
.top_text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
#u11 {
  border-width: 0px;
  width: 25px;
  height: 25px;
}
.img_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.foods {
  width: 74%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
</style>>

